<template>
  <view class="page-default">
    <c-nav-bar title="致学生及家长的一封信" type="white" bg-color="rgba(255,255,255,0.6)" />
    <view class="bg-green-rgba m-3 mb-4 mt-6 rounded-4 px-4 pb-8 line-height-6">
      <view class="flex items-center justify-between">
        <view class="m-3 mt-4 flex items-center text-#1A2B5C font-bold">
          <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />数据概览
        </view>

        <up-select
          v-model:current="cateId" label="2025年新生" class="font-bold"
          :options="cateList" item-color="#6E7B8B" @select="selectItem"
        />
      </view>

      <view class="flex border py-4">
        <view class="h-20 flex basis-1/2 items-center px-4">
          <ProcessChart color="yellow" />
        </view>
        <view class="h-20 basis-1/2 px-4">
          <view class="flex items-center justify-between">
            <view><u-image src="/static/images/analysis/admisstion.png" height="30" width="30" class="" mode="aspectFill" /></view><view>总招生</view><view class="text-#1A2B5C font-bold">
              500 人
            </view>
          </view>
          <view class="mt-4 flex items-center justify-between">
            <view><u-image src="/static/images/analysis/report.png" height="30" width="30" class="" mode="aspectFill" /></view><view>总招生</view><view class="text-#1A2B5C font-bold">
              500 人
            </view>
          </view>
        </view>
      </view>
      <view class="relative">
        <u-image class="absolute left-8 -bottom-20" src="/static/images/green.png" height="86" width="20" mode="aspectFill" />
        <u-image class="absolute right-8 -bottom-20" src="/static/images/green.png" height="86" width="20" mode="aspectFill" />
      </view>
    </view>
    <view class="m-3 mt-4 rounded-4 bg-white bg-opacity-90 px-4 pb-8 pt-2 line-height-6">
      <view class="flex items-center justify-between">
        <view class="m-3 flex items-center text-#1A2B5C font-bold">
          <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />宿舍报到情况
        </view>
        <u-icon name="arrow-right" size="20" color="#C5C9D1" />
      </view>
      <view>
        <view class="flex items-center justify-between">
          <ProcessChart color="blue" />
          <ProcessChart color="green" />
        </view>
        <view class="px-2 py-2">
          <u-line dashed />
        </view>
        <view class="flex items-center justify-between">
          <view class="m-3 mt-6 flex items-center text-#1A2B5C font-bold">
            <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />各专业实时报道统计
          </view>
          <u-icon name="arrow-right" size="20" color="#C5C9D1" />
        </view>
        <view>
          <view class="mb-2 flex items-center">
            <view class="relative w-full">
              <view class="absolute left-2 top-1 w-20 font-bold" style="z-index: 999;">
                中专
              </view>
              <up-line-progress class="w-full" :percentage="80" height="36" active-color="#E8F1FF" inactive-color="#F5F9FC" />
            </view>
            <view class="ml-3 w-30">
              <view class="text-sm text-#6E7B8B">
                实到170人
              </view>
              <view class="text-xs text-#C5C9D1">
                应到175人
              </view>
            </view>
          </view>

          <view class="mb-2 flex items-center">
            <view class="relative w-full">
              <view class="absolute left-2 top-1 w-20 font-bold" style="z-index: 999;">
                3+2
              </view>
              <up-line-progress class="w-full" :percentage="67" height="36" active-color="#E8F1FF" inactive-color="#F5F9FC" />
            </view>
            <view class="ml-3 w-30">
              <view class="text-sm text-#6E7B8B">
                实到170人
              </view>
              <view class="text-xs text-#C5C9D1">
                应到175人
              </view>
            </view>
          </view>
          <view class="flex items-center">
            <view class="relative w-full">
              <view class="absolute left-2 top-1 w-20 font-bold" style="z-index: 999;">
                升学班
              </view>
              <up-line-progress class="w-full" :percentage="45" height="36" active-color="#E8F1FF" inactive-color="#F5F9FC" />
            </view>
            <view class="ml-3 w-30">
              <view class="text-sm text-#6E7B8B">
                实到170人
              </view>
              <view class="text-xs text-#C5C9D1">
                应到175人
              </view>
            </view>
          </view>

          <!-- <BarChart /> -->
        </view>
        <view class="px-2 pt-8">
          <u-line dashed />
        </view>
        <view class="m-3 mt-6 flex items-center text-#1A2B5C font-bold">
          <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />预报到完成情况
        </view>

        <view class="bg-green-trsans rounded-2 py-4">
          <view class="text-center font-bold">
            信息采集：<text class="text-#02CAB1">
              369
            </text>/500
            人
          </view>
          <PieChart />
        </view>
        <view class="bg-blue-trsans rounded-2 py-4">
          <view class="text-center font-bold">
            特殊体质上报：<text class="text-#29B9E6">
              369
            </text>人
          </view>
          <ColumnChart />
        </view>

        <view class="bg-yellow-trsans rounded-2 py-4">
          <view class="mb-4 text-center font-bold">
            特长上报：<text class="text-#E7B710">
              269
            </text>人
          </view>
          <view class="px-6">
            <view class="flex items-center gap-2 border bg-#fcf7e2 px-6 py-1">
              <view class="w-[40px] flex items-center justify-center">
                排名
              </view>
              <view class="flex flex-1 items-center justify-left">
                特长
              </view>
              <view class="w-[80px] flex items-center justify-right">
                上报人数
              </view>
            </view>

            <view class="flex items-center gap-2 border px-6 py-1">
              <view class="w-[40px] flex items-center justify-center">
                <u-image src="/static/images/analysis/top1.png" height="30" width="30" class="" mode="aspectFill" />
              </view>
              <view class="flex flex-1 items-center justify-left">
                舞蹈
              </view>
              <view class="w-[80px] flex items-center justify-right">
                50人
              </view>
            </view>
            <view class="flex items-center gap-2 border px-6 py-1">
              <view class="w-[40px] flex items-center justify-center">
                <u-image src="/static/images/analysis/top2.png" height="30" width="30" class="" mode="aspectFill" />
              </view>
              <view class="flex flex-1 items-center justify-left">
                舞蹈
              </view>
              <view class="w-[80px] flex items-center justify-right">
                50人
              </view>
            </view>
            <view class="flex items-center gap-2 border px-6 py-1">
              <view class="w-[40px] flex items-center justify-center">
                <u-image src="/static/images/analysis/top3.png" height="30" width="30" class="" mode="aspectFill" />
              </view>
              <view class="flex flex-1 items-center justify-left">
                舞蹈
              </view>
              <view class="w-[80px] flex items-center justify-right">
                50人
              </view>
            </view>
            <view class="flex items-center gap-2 border px-6 py-1">
              <view class="w-[40px] flex items-center justify-center">
                <view class="h-5 w-5 rounded-2 bg-#E7F6EA text-center text-#3AA69B line-height-5">
                  4
                </view>
              </view>
              <view class="flex flex-1 items-center justify-left">
                舞蹈
              </view>
              <view class="w-[80px] flex items-center justify-right">
                50人
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import BarChart from './common/bar.vue';
import ColumnChart from './common/column.vue';
import PieChart from './common/pie.vue';
import ProcessChart from './common/process.vue';

const cateId = ref('1');
const cateList = ref([
  {
    id: '1',
    name: '2025级',
  },
  {
    id: '2',
    name: '2024级',
  },
  {
    id: '3',
    name: '2023级',
  },
]);
</script>

<style lang="scss" scoped>
.page-default {
  width: 100%;
  min-height: 100vh;
  background: url('@/static/images/welcome/header-bg.png') no-repeat center top ;
  background-size: 100% 50%;
}
.bg-green-rgba {
  background: rgba(231, 246, 234, 0.9);
  border: 1px solid #fff;
}
:deep(.u-line-progress__text){
  color: #2D7AFC !important;
  font-size: 16px !important;
  font-weight: bold !important;
}
.bg-blue-trsans{
  background: linear-gradient(to bottom, #e9f7fb,transparent, transparent);
}
.bg-green-trsans{
  background: linear-gradient(to bottom, #e6f9f7,transparent, transparent);
}
.bg-yellow-trsans{
  background: linear-gradient(to bottom, #fdf6e6,transparent, transparent);
}
:deep(.u-select__content .active .u-select__item_text){
  color:#3AA69B !important;
}
:deep(.u-select__content .u-select__options__wrap){
 top: 30px ;
}
</style>
